<template>

  <div>
    <!-- 查询条件 -->
    <el-form :inline="true">

      <el-form-item label="标题">
        <el-input v-model="searchMap.title" placeholder=""></el-input>
      </el-form-item>

      <el-form-item label="盘点单号">
        <el-select v-model="searchMap.inventNum" filterable placeholder="请选择">
          <el-option v-for="inventoryTask in inventoryTaskList" :key="inventoryTask.inventNum"
            :label="inventoryTask.inventNum" :value="inventoryTask.inventNum">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="状态：">
        <el-radio-group v-model="searchMap.status">
          <el-radio-button label="1">盘点中</el-radio-button>
          <el-radio-button label="2">待盘点</el-radio-button>
          <el-radio-button label="3">已完成</el-radio-button>
        </el-radio-group>
      </el-form-item>

      <el-button type="primary" @click="fetchData()">查询</el-button>
      <el-button type="primary" @click="reset()">重置</el-button>
    </el-form>


    <!-- 表格 -->
    <el-table :data="list" border style="width: 100%">
      <!-- 设置是否保留选择 -->
      <el-table-column type="selection" fixed width="50" :reserve-selection="true">
      </el-table-column>
      <!-- 序号列 -->
      <el-table-column fixed prop="id" label="序号" width="50">
      </el-table-column>
      <el-table-column fixed prop="status" label="状态" width="120">
        <template slot-scope="scope">
          <el-button plain :type="getButtonType(scope.row.status)">
            {{ getButtonText(scope.row.status) }}
          </el-button>
        </template>
      </el-table-column>

      <el-table-column prop="name" label="任务名称" width="160">
      </el-table-column>
      <el-table-column prop="inventNum" label="盘点单号">
      </el-table-column>
      <el-table-column prop="plannedDate" label="计划盘点日期" :formatter="dataFormat" width="160">
      </el-table-column>
      <el-table-column prop="inventoryName" label="盘点人员">
      </el-table-column>
      <el-table-column prop="deptName" label="所在部门">
      </el-table-column>
      <el-table-column prop="method" label="盘点方式">
      </el-table-column>
      <el-table-column prop="actualDate" label="实际盘点日期" :formatter="dataFormat" width="160">
      </el-table-column>
      <el-table-column prop="realNum" label="盘点数量">
      </el-table-column>
      <el-table-column prop="creatorName" label="创建人">
      </el-table-column>
      <el-table-column prop="created" label="创建时间" :formatter="dataFormat" width="160">
      </el-table-column>
      <el-table-column prop="remark" label="备注">
      </el-table-column>

      <el-table-column fixed="right" label="操作" width="80">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row.id)" type="text" size="small">查看</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--分页-->
    <el-pagination @size-change="sizeData" @current-change="pageData" :page-sizes="[1, 10, 20, 30, 50, 100]"
      :page-size="10" layout="total, sizes, prev, pager, next, jumper" :total="count">
    </el-pagination>

  </div>
</template>

<script>
import inventoryTaskService from "@/api/inventory-task";
//导入日期组件
import moment from 'moment'

export default {
  data() {
    return {
      //页面数据
      list: [],
      //查询条件
      searchMap: {
        page: 1,
        limit: 10
      },
      checked: true,
      count: 0,
      // 选中行
      selectedRows: [],
      // 是否全选
      checkAll: false,
      // 是否部分选中
      isIndeterminate: false,
      inventoryTaskList: [],
      //默认选中
      radio1: '',
    };
  },
  // 在组件创建时调用
  created() {
    this.fetchData();
    this.getInventoryTaskList();
  },
  methods: {
    fetchData() {
      inventoryTaskService.list(this.searchMap)
        .then(response => {
          this.list = response.data;
          this.count = response.count;
        })
    },
    getButtonType(status) {
      // 根据状态返回按钮类型
      switch (status) {
        case 1:
          return 'warning';
        case 2:
          return 'primary';
        case 3:
          return 'success';
        default:
          return 'info';
      }
    },
    getButtonText(status) {
      // 根据状态返回按钮文本
      switch (status) {
        case 1:
          return '盘点中';
        case 2:
          return '待盘点';
        case 3:
          return '已完成';
        default:
          return '未知状态';
      }
    },
    // 获取资产报告列表
    getInventoryTaskList() {
      inventoryTaskService.findAll().then(response => {
        this.inventoryTaskList = response.data;
      });
    },
    reset() {
      if (this.searchMap.inventoryTaskNum === '') {
        this.searchMap = {};
      } else {
        this.searchMap = {
          inventoryTaskNum: this.searchMap.inventoryTaskNum
        };
      }
    },
  
    //增加一个格式化日期的方法
    dataFormat(row, column) {
      let date = row[column.property]
      if (date == undefined) {
        return ''
      }
      return moment(date).format('YYYY-MM-DD hh:mm:ss')
    },

    //分页
    //当页面大小改变的时候调用此方法，传递改变的页面大小
    sizeData(size) {
      this.searchMap.limit = size
      this.fetchData()
    },
    pageData(page) {
      this.searchMap.page = page
      this.fetchData()
    },

    //多选框
    // 处理选择变化
    handleSelectionChange(selection) {
      // 将选中的行赋值给selectedRows
      this.selectedRows = selection;
      // 计算选中的行数
      const checkedCount = selection.length;
      // 如果选中的行数等于列表的长度，则全选
      this.checkAll = checkedCount === this.list.length;
      // 如果选中的行数大于0且小于列表的长度，则部分选中
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.list.length;
    },

    // 处理全选变化
    handleCheckAllChange(val) {
      // 清空表格的选择
      this.$refs.table.clearSelection();
      // 如果全选，则将列表中的每一行都选中
      if (val) {
        this.list.forEach(row => {
          this.$refs.table.toggleRowSelection(row, true);
        });
      }
    }

  }
}
</script>
